<template>
  <view class="login-container">
  
    <view class="login-header">
        <view class="logo">
      <image src="https://sp4-lanqiao-shop-vue.netlify.app/img/lanqiao-logo.5de12f2e.svg" />
      </view>
      <text class="title">用户登录</text>
    </view>
    <view class="input-group">
      <label class="input-label">用户名：</label>
      <input
        class="input-field"
        type="text"
        v-model="username"
        placeholder="请输入用户名"
      />
    </view>
    <view class="input-group">
      <label class="input-label">密码：</label>
      <input
        class="input-field"
        type="password"
        v-model="password"
        placeholder="请输入密码"
      />
    </view>
    <view class="button-group">
      <button class="login-button" @click="login">登录</button>
      <button class="register-button" @click="register">注册</button>
    </view>
  </view>
</template>

<script>
<<<<<<< HEAD
import config from "../../config";

=======
import axios from "axios";
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
<<<<<<< HEAD
    login() {
      if (this.username === "" || this.password === "") {
        uni.showToast({
          title: '用户名或密码不能为空',
          icon: 'none',
        });
        return;
      }
      uni.request({
        url: config.URL + `/users?username=${this.username}`,
        method: 'GET',
        success: (res) => {
          const user = res.data[0];
          console.log(user);
          console.log(user.token);

          if (user && user.password === this.password) {
            uni.setStorageSync("ID", user.id);
            uni.setStorageSync("token", user.token);
            uni.showToast({
              title: '登录成功',
              icon: 'success',
            });
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/index/index",
              });
            }, 1000);
          } else {
            uni.showToast({
              title: '用户名或密码错误',
              icon: 'none',
            });
          }
        },
        fail: (error) => {
          uni.showToast({
            title: '用户名或密码错误',
            icon: 'none',
          });
        }
      });
=======
    async login() {
      if(this.username === "" || this.password === ""){
        uni.showToast({
          title: '用户名或密码不能为空',
          icon: 'none',
        })
        return
      }
      try {
        const res = await axios.get(
          `http://localhost:3000/users?username=${this.username}`
        );
        const user = res.data[0];
        console.log(user);
        console.log(user.token);


        if (user && user.password === this.password) {
        
          uni.setStorageSync("ID", user.id);
          uni.setStorageSync("token", user.token);
          uni.showToast({
            title: '登录成功',
            icon: 'success',
          })
          setTimeout(()=>{
        uni.switchTab({
              url: "/pages/index/index",
            });
        
          },1000)
           
        }
         
       
      } catch (error) {
         uni.showToast({
            title: '用户名或密码错误',
            icon: 'none',
          })
      }
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
    },
    register() {
      uni.navigateTo({ url: "/pages/register/index" });
    },
  },
<<<<<<< HEAD
};    
=======
};
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
</script>

<style scoped>
.logo{

  position: relative;
  z-index: 10;
}
.login-container {
  font-family: "Poppins", sans-serif;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 16px;
}

.login-header {
  margin-bottom: 24px;
}

.title {
  font-size: 2em;
  font-weight: 600;
   color: #007AFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-left: 90px;
 
}

.input-group {
  width: 80%;
  margin-bottom: 16px;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: white;
  text-align: left;
}

.input-field {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  transition: box-shadow 0.3s ease;
}

.input-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px #007aff;
}

.button-group {
  width: 100%;
}

.login-button,
.register-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.3s ease;
}

.login-button {
  background: #007aff;
  color: white;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
  width: 40%;
}

.login-button:hover {
  background: #005ec2;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 122, 255, 0.3);
}

.register-button {
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 40%;
}

.register-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
</style>
